<template>
  <div style="text-align:left">
    <el-upload :http-request="uploadBpmn" action="action" :class="{ hide: hideUpload }" class="select-upload"
      :file-list="imageUrl" :limit="limit" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
      :on-success="handleAvatarSuccess" :on-error="errorUpload" :on-exceed="onExceed"
      :list-type="isType == 1 || isType == 3 ? 'picture-card' : ''">
      <i class="el-icon-plus" v-if="isType == 1 || isType == 3"></i>
      <el-button size="small" v-else-if="isType == 2" plain icon="el-icon-upload2">上传文件</el-button>
      <div slot="tip" v-if="isType == 1 || isType == 2" style="color: #a69c9b;">{{ title }}
      </div>
      <el-select slot="tip" v-else-if="isType == 3" class="file-select" filterable clearable v-model="equipmentTypeName"
        placeholder="请选择" @change="quipmentTypeChange($event)">
        <el-option v-for="item in options" :key="item.equipmentTypeId" :label="item.equipmentTypeName"
          :value="item.equipmentTypeUuid"></el-option>
      </el-select>
    </el-upload>
    <!-- <el-upload :action="api + '/file/upload'"
               :class="{ hide: hideUpload }"
               class="select-upload"
               :file-list="imageUrl"
               :limit="limit"
               :on-preview="handlePictureCardPreview"
               :on-remove="handleRemove"
               :on-success="handleAvatarSuccess"
               :on-error="errorUpload"
               :on-exceed="onExceed"
               :list-type="isType==1|| isType==3? 'picture-card' : ''">
      <i class="el-icon-plus"
         v-if="isType==1||isType==3"></i>
      <el-button size="small"
                 v-else-if="isType==2"
                 plain
                 icon="el-icon-upload2">上传文件</el-button>
      <div slot="tip"
           v-if="isType==1||isType==2"
           style="color: #a69c9b;">{{ title }}
      </div>
      <el-select slot="tip"
                 v-else-if="isType==3"
                 class="file-select"
                 filterable
                 clearable
                 v-model="equipmentTypeName"
                 placeholder="请选择"
                 @change="quipmentTypeChange($event)">
        <el-option v-for="item in options"
                   :key="item.equipmentTypeId"
                   :label="item.equipmentTypeName"
                   :value="item.equipmentTypeUuid"></el-option>
      </el-select>
    </el-upload> -->
    <el-dialog :visible.sync="dialogVisible" append-to-body :modal="false" title="图片查看" width="50%">
      <el-image :src="dialogImageUrl" alt="" style="height:400px;width:auto;" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'imgUpload',
  props: {
    limit: {
      type: Number,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return 1;
      }
    },
    title: {
      type: String,
      default: () => '支持扩展名：.rar .zip .doc .docx .jpg...'
    },
    stlectId: String,
    isType: {
      type: Number,
      default: function () {
        return 1;
      }
    },
    imageUrl: {
      type: Array,
      default: () => []
    },
    isIcon: {
      type: Boolean,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return true;
      }
    },
    options: {
      type: Array,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return [];
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: [],
      equipmentTypeName: this.stlectId,
      equipmentTypeUuid: ''
    };
  },
  watch: {
    stlectId(val) {
      this.equipmentTypeName = val;
    },
  },
  components: {},
  computed: {
    api() {
      return this.$config.host;
    },
    hideUpload() {
      return this.imageUrl.length >= this.limit;
    },

  },
  methods: {
    async uploadBpmn(param) {
      // 部署流程定义（点击按钮，上传bpmn文件，上传成功后部署，然后重新加载列表）
      const formData = new FormData()
      formData.append('file', param.file) // 传入bpmn文件
      const res = await this.sendPost('/file/upload', formData);
      // console.log(res)
      if (res.errcode == 0) {
        this.imageUrl.push({
          name: res.data.fileName,
          url: res.data.urlPath
        });
        this.suc({
          message: '上传成功'
        });
        this.$emit('addUpload');
      } else {
        this.err({
          message: '上传失败'
        });
      }
    },
    quipmentTypeChange(e) {
      this.$emit('getUuid', e);
    },
    getEquipmentTypeUuid() {
      let str = '';
      return (str = this.equipmentTypeUuid);
    },
    getString() {
      let list = [];
      this.imageUrl.map(ele => {
        list.push(ele.url);
      });
      return list.join(',');
    },
    getList() {
      let list = [];
      this.imageUrl.map(ele => {
        list.push(ele.url);
      });
      return list;
    },
    getFileName() {
      let list = [];
      this.imageUrl.map(ele => {
        list.push(ele.name);
      });
      return list.join(',');
    },
    errorUpload(err, file, fileList) {
      console.log(err);
      console.log(file);
      console.log(fileList);
    },
    handleAvatarSuccess(res, file) {
      // if (res.errcode == 0) {
      //   this.imageUrl.push({
      //     name: res.data.fileName,
      //     url: res.data.urlPath
      //   });
      //   this.suc({
      //     message: '上传成功'
      //   });
      //   this.$emit('addUpload');
      // } else {
      //   this.err({
      //     message: '上传失败'
      //   });
      // }
    },
    onExceed(file, fileList) {
      if (fileList.length == 1) {
        this.err({
          message: '仅支持上传一个附件'
        });
      }
    },
    handleRemove(file, fileList) {
      let delPath = file.url;
      this.imageUrl.forEach((ele, index) => {
        if (ele.url == delPath) {
          this.imageUrl.splice(index, 1);
        }
      });
      this.$emit('removeUpload');
    },
    handlePictureCardPreview(file) {
      console.log(file)
      if (this.isType == 1 || this.isType == 3) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      } else if (this.isType == 2) {
        this.$emit('downloadALink', file);
      }
    }
  },
  created() { },
  mounted() { },
  beforeDestroy() { },
  destroyed() { }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
::v-deep .hide .el-upload--picture-card {
  display: none !important;
}

::v-deep .el-dialog__body {
  text-align: center;
}

// ::v-deep .el-upload-list__item {
//   // display: block;
// }

::v-deep .el-upload-list__item {
  transition: none;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.file-select {
  // float: left;
  display: flex;
  margin-top: 10px;
  width: 150px;
}
</style>
